<template>
	<div>
		<el-card
			class="box-card"
			:style="{background:color}"
		>
			<div
				slot="header"
				class="clearfix setFlex"
			>
				<el-tag>{{title}}</el-tag>
				<div class="block">
					<el-tooltip
						class="item"
						effect="dark"
						content="更改背景色"
						placement="top-end"
					>
						<el-color-picker
							v-model="color"
                            size="mini"
							show-alpha
						></el-color-picker>
					</el-tooltip>
				</div>
			</div>
			<div
				id="mix-line-bar"
				class="chart"
			></div>
		</el-card>
	</div>
</template>

<script>
	export default {
		name: "ZZHHT",
		data() {
			return {
				title: "当前显示：折柱混合图组件",
				color: "#FFFFFF",
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.drawLine();
			});
		},
		methods: {
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById("mix-line-bar"));
				let option = {
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "cross",
							crossStyle: {
								color: "#999",
							},
						},
					},
					toolbox: {
						feature: {
							dataView: { show: true, readOnly: false },
							magicType: { show: true, type: ["line", "bar"] },
							restore: { show: true },
							saveAsImage: { show: true },
						},
					},
					legend: {
						data: ["蒸发量", "降水量", "平均温度"],
					},
					xAxis: [
						{
							type: "category",
							data: [
								"1月",
								"2月",
								"3月",
								"4月",
								"5月",
								"6月",
								"7月",
								"8月",
								"9月",
								"10月",
								"11月",
								"12月",
							],
							axisPointer: {
								type: "shadow",
							},
						},
					],
					yAxis: [
						{
							type: "value",
							name: "水量",
							min: 0,
							max: 250,
							interval: 50,
							axisLabel: {
								formatter: "{value} ml",
							},
						},
						{
							type: "value",
							name: "温度",
							min: 0,
							max: 25,
							interval: 5,
							axisLabel: {
								formatter: "{value} °C",
							},
						},
					],
					series: [
						{
							name: "蒸发量",
							type: "bar",
							data: [
								2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
								3.3,
							],
						},
						{
							name: "降水量",
							type: "bar",
							data: [
								2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
								2.3,
							],
						},
						{
							name: "平均温度",
							type: "line",
							yAxisIndex: 1,
							data: [
								2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
							],
						},
					],
				};
				// 绘制图表
				myChart.setOption(option);
			},
		},
	};
</script>

<style lang="css" scoped>
</style>